<template>
  <main-content-search-bar-wrapper>
    <search-bar>
      <template #normal>
        <el-form-item label="商品名称/商品货号">
          <el-input v-model="searchForm.goodsName" placeholder="请输入商品名称/商品货号" clearable></el-input>
        </el-form-item>
        <goods-supplier-filter url="merchant/member/goods/getStore"
          @change="({ selected }) => searchForm.storeId = selected">
        </goods-supplier-filter>
        <!--        <ins-cascader-filter @change="(insId) => searchForm.insIds = insId"></ins-cascader-filter>-->
        <el-form-item>
          <el-button type="primary" @click="refreshList">查询</el-button>
          <el-button type="primary" @click="showAddRankBenefits" v-has="['10100104']">关联权益</el-button>
          <!-- TODO 加权限 -->
          <el-button type="primary" @click="showExportData = true">导出</el-button>
        </el-form-item>
      </template>
    </search-bar>
  </main-content-search-bar-wrapper>

  <layout-table ref="rankBenefitTableRef" url="merchant/member/equity/pageEquity" :param="searchForm" :hide-init="true"
    :set-search="manullySearch">
    <el-table-column label="编号" prop="taskName" min-width="180">
      <template #default="scope">
        {{ scope.row.memberGoodsDetailVo?.id }}
      </template>
    </el-table-column>
    <el-table-column label="商品图片" prop="taskDescription" min-width="200">
      <template #default="scope">
        <!--        {{scope.row.memberGoodsDetailVo?.thumbnailUrl}}-->
        <div style="width: 100px;height: 100px" class="flex-center">
          <el-image style="max-width: 100px;max-height: 100px"
            :src="scope.row.memberGoodsDetailVo?.thumbnailUrl"></el-image>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="商品名称" prop="categoryIds" min-width="150">
      <template #default="scope">
        {{ scope.row.memberGoodsDetailVo?.name }}
      </template>
    </el-table-column>
    <el-table-column label="规格" prop="createTime" width="120">
      <template #default="scope">
        {{ scope.row.memberGoodsDetailVo?.products?.[0]?.name }}
      </template>
    </el-table-column>
    <!--    <el-table-column label="商品分类" prop="createTime" width="180">-->
    <!--      <template #default="scope">-->
    <!--        {{scope.row.memberGoodsDetailVo?.products?.[0]?.type}}-->
    <!--      </template>-->
    <!--    </el-table-column>-->
    <el-table-column label="已领" prop="status" width="120">
      <template #default="scope">
        {{ scope.row.memberGoodsDetailVo?.sellCount }}
      </template>
    </el-table-column>
    <el-table-column label="操作" fixed="right" width="180" v-has="['10100105', '10100106']">
      <template #default="scope">
        <el-button link type="primary" @click="editLimit(scope.row)" v-has="['10100105']">领取限制</el-button>
        <el-button link type="danger" @click="deleteRow(scope.row)" v-has="['10100106']">删除</el-button>
      </template>
    </el-table-column>
  </layout-table>

  <benefit-limit v-model:show="isShowBenefitLimitDialog" :row-data="operatingRow" :rank-data="selectedRank"
    @confirm="refreshList"></benefit-limit>

  <select-goods v-model:show="isShowAddRankBenefits" table-url="/merchant/member/goods/pageProduct"
    :selected-rank="selectedRank" @confirm="refreshList"></select-goods>
  <exportData v-model:show-dialog="showExportData" :search-data="searchForm" title="等级权益"
    export-type="memberEquityExport">
  </exportData>
</template>

<script lang="ts" setup>
import { Ref } from 'vue';
import { deleteRankBenefits } from "@/api/vipCenter";
import { IRankBenefitItem, IRankBenefitsData } from "@/api/modules/vipCenter";
import BenefitLimit from "@/views/vipCenter/components/BenefitLimit.vue";
import SelectGoods from "@/views/vipCenter/components/SelectGoods.vue"
import exportData from "@/components/exportData/exportData.vue";
const props = defineProps<{
  selectedRank: IRankBenefitItem
}>()

const selectedRankRef = toRef(props, 'selectedRank')
const showExportData = ref(false)
const searchForm = reactive<IRankBenefitsData>({
  memberId: null,
  goodsName: '',
  storeId: null,
  // insIds: []
})
const list = ref<IRankBenefitItem[]>([])
const manullySearch: Ref<number> = ref(0)

const operatingRow: Ref<IRankBenefitItem | undefined> = ref<IRankBenefitItem>()
const deleteRow = async (rowData: IRankBenefitItem) => {
  console.log('row', rowData)
  const rs = await deleteRankBenefits({ id: rowData.id, name: rowData.memberGoodsDetailVo.name })

  if (rs.code === 200) {
    ElMessage.success('删除成功')
    refreshList()
  }
}

const isShowBenefitLimitDialog: Ref<boolean> = ref(false)
const editLimit = (rowData: IRankBenefitItem) => {
  operatingRow.value = rowData
  isShowBenefitLimitDialog.value = true
}

// 选择商品
const isShowAddRankBenefits = ref(false)
const showAddRankBenefits = () => {
  isShowAddRankBenefits.value = true
}

const refreshList = () => {
  manullySearch.value++
}

const store = useStore();
// 监听机构
const insId = computed(() => {
  return store.state.insId.insId;
});
watch(
  () => insId,
  async () => {
    refreshList()
  },
  {
    deep: true
  }
)

watch(selectedRankRef, () => {
  searchForm.memberId = selectedRankRef.value.id
})

onMounted(() => {
  searchForm.memberId = selectedRankRef.value.id
  // refreshList()
})

</script>

<style scoped lang="scss">
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
